<template>
  <div>
    <!-- 入库/出库信息 -->
    <div class="inout-charts">
      <el-row>
        <el-col
          :span="19"
        ><div class="grid-content bg-purple" />
          <p class="subject">入库/出库信息</p></el-col>
        <el-col
          :span="5"
        ><div class="grid-content bg-purple-light" />
          <el-radio-group v-model="radio1">
            <el-radio-button
              v-for="(item, index) in dateList"
              :key="index"
              :label="item"
              @click.native="toggleChart(index)"
            />
          </el-radio-group>
        </el-col>
      </el-row>
      <!-- 准备一个echarts容器 -->
      <div ref="chartRef" style="width:100%; height:430px" />
    </div>
  </div>
</template>

<script>
import { Mychart } from '@/api/home'
export default {
  data() {
    return {
      radio1: '本周',
      dateList: ['本周', '本月', '全年'],
      params: {
        dimension: 'w'
      },
      chartData: {
        xAxis: [],
        yAxisData1: [],
        yAxisData2: []
      }

    }
  },
  created() {
    this.WeekNumber()
  },
  methods: {
    async WeekNumber() {
      const { data } = await Mychart(this.params)
      this.chartData.xAxis = data.x
      this.chartData.yAxisData1 = data.data[0].data
      this.chartData.yAxisData2 = data.data[1].data
      this.echartsInit()
    },
    toggleChart(index) {
      if (index === 0) {
        this.WeekNumber()
      } else if (index === 1) {
        this.params.dimension = 'e'
        this.WeekNumber()
      } else {
        this.params.dimension = 'c'
        this.WeekNumber()
      }
    },
    echartsInit() {
      const myChart = this.$echarts.init(this.$refs.chartRef)
      const option = {
        grid: {
          top: 20,
          left: 50,
          right: 30,
          bottom: 80
        },
        color: ['#FF7100', '#FFB200'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['入库', '出库'],
          bottom: 10
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: false },
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: true },
            data: this.chartData.xAxis,
            axisLine: {
              lineStyle: {
                color: '#e4dbda'
              }
            },
            axisLabel: {
              show: true,
              margin: 20,
              color: '#332929',
              fontWeight: 400
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#332929'
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#e4dbda',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '入库',
            type: 'bar',
            barGap: 0,
            data: this.chartData.yAxisData1
          },
          {
            name: '出库',
            type: 'bar',
            data: this.chartData.yAxisData2
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.inout-charts {
  margin-top: 20px;
  height: 500px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  .subject {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
}
</style>
<style lang='scss'>
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #fff;
  background-color: #ffb200;
  border-color: #ffb200;
  box-shadow: -1px 0 0 0 #ffb200;
}
</style>
